<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
	<title>用户注册页面</title>
	<style type="text/css">
		html{
			width:100%;
			height:98%;
		}
		body{
			width:99%;
			height:90%;
			background-image: url("img/qq.jpg");
		}
	#backImg{
		width: 100%;
		height: 98%;
		position: absolute;
		z-index: -1;
	}
	
	.label{
		background:ORANGE;
	}

	#top{
		font-size: 60px;
		margin-left: 21%;
		color: #9E3FAE;
	}

		#d1{
			float: left;
			width: 100%;
			height: 100%;
			margin-top: 1%;
			margin-left: 16%;
		}
		.text{
			width: 160px;
			color: #BEA3A3;
		}
		#reset{
			margin-left: 92px;
		}

		#submited{
			width:300px;
			margin:40px auto 0 auto;
		}

		#submited {
			width:100%;
			margin:0;
			padding:.5em 0;
			-webkit-border-radius:.3em;
			-moz-border-radius: .3em;
			border:#1263be solid 1px;
			background:#1b85fd;
			color:#FFF;
			font-size:17px;
			font-weight:bolder;
			letter-spacing:1em;
		}

		#submited:hover{
			background:#1263be;
		}
		#title{
			margin-left: 20px;
		}
		.label{
			color:RED;
		}
		#message{
			margin-left:3%;
			color:RED;
			font-size:35px;
		}
	</style>

	<script type="text/javascript">
	
	function stop(){
		return false;
		}
		document.oncontextmenu=stop;
	
	var flag = false;
	function check() {
		var text = document.getElementsByClassName('text');
		var label = document.getElementsByClassName("label");
		var reg = /[^a-z]{1,}/gi;
		var res = (text[0].value).match(reg);
		if(text[0].value=="用户名" || text[0].value=="") {
			label[0].innerHTML= "请输入用户名"; 
		}
		else if(res!=null) label[0].innerHTML= "用户名只能是字母！"; 
		else label[0].innerHTML= ""; 
		
		if(text[1].value=="密码" || text[1].value==""){
			label[1].innerHTML= "请输入密码"; 
			return;
		}
		else label[1].innerHTML= ""; 
		
		if(text[2].value=="确认密码" || text[2].value==""){
			label[2].innerHTML= "请再次输入密码"; 
			return;
		}
		else label[2].innerHTML= ""; 
		
		if(text[1].value!=text[2].value){
			label[2].innerHTML= "两次输入密码不一致"; 
			return;
		}
		else label[2].innerHTML= ""; 
		
		var reg = /www\.\w{3,}\@\w{1,}\.com/gi;
		var res = text[3].value.match(reg);
		if(text[3].value=="邮箱" || text[3].value==""){
			label[3].innerHTML= "请输入邮箱"; 
			return;
		}
		
		else if(res==null) label[3].innerHTML= "邮箱格式不正确！应形如：www.xxx@xxx.com"; 
		else label[3].innerHTML= ""; 
		
		if(text[4].value=="真实姓名" || text[4].value=="") {
			label[4].innerHTML= "请输入真实姓名,便于您找回密码"; 
			return;
		}
		else label[4].innerHTML= ""; 
		
		var reg = /\d{14,}/;
		var res = text[5].value.match(reg);
		if(text[5].value=="学号" || text[5].value=="") {
			label[5].innerHTML= "请输入您的学号,便于您找回密码"; 
			return;
		}
		else if(res==null || res[0].length!=14) label[5].innerHTML= "学号为14位的数字！"; 
		else label[5].innerHTML= ""; 
		flag = true;
	}
	function sub(){
		check();
		if(!flag) return;
		var form = document.getElementById("reg");
		form.submit();
	}
	function clean(node,str){
		if(node.value==str) node.value = "";
	}
	
	document.onkeydown=function(event){
	    var e = event || window.event || arguments.callee.caller.arguments[0];
	    if(e && e.keyCode==13)   sub(); //enter  
	}
	</script>

</head>
<body>

<div id="backImg"> <img src="./img/b.jpg" width="100%" height="100%"> </div>
	<div id="d1">
	<label id="top" >在线SQL学习工具</label>
		<h1 id="title">用户注册</h1>
		<form  method="post" action="registerServlet.view"  id="reg">
			<table>
				<tr> 
				<td><input type="text" name="user" class="text" value="用户名" onfocus="clean(this,'用户名')" onblur="check()">	</td> 
				<td> <label class="label"></</label> </td>
				</tr>
				
				<tr> 
				<td> <input type="text" name="passwd" class="text" value="密码" onfocus="clean(this,'密码')" onblur="check()"> </td>	
				<td> <label class="label"></</label> </td>
				</tr>
				
				<tr> 
				<td><input type="text" name="repasswd" class="text" value="确认密码" onfocus="clean(this,'确认密码')" onblur="check()"></td>	
				<td> <label class="label"></</label> </td>
				</tr>
				
				<tr> 
				<td> <input type="text" name="email" class="text" value="邮箱" onfocus="clean(this,'邮箱')" onblur="check()"> </td>	
				<td> <label class="label"></</label> </td>
				</tr>
				
				<tr> 
				<td> <input type="text" name="name" class="text" value="真实姓名" onfocus="clean(this,'真实姓名')" onblur="check()"> </td>	
				<td> <label class="label"></</label> </td>
				</tr>
			
				<tr> 
				<td> <input type="text" name="sid" class="text" value="学号" onfocus="clean(this,'学号')" onblur="check()"> </td>	
				<td> <label class="label"></</label> </td>
				</tr>
				
				<tr>
					 <td> <input type="button" name="xxx" value="注册" id="submited" onclick="sub()"></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="message">
		<%
		Object e = request.getAttribute("error");
		if(e!=null) out.print(e); 
		%>
	</div>

</body>
</html>
